import { computed, ref } from "vue";
import { HashCode } from "@/utils/hash";
const canvasProcessFun = () => {
  //canvas对象集合
  const deviceList = ref([])
  //所有元素锚点集合
  const pointList = computed(() => {
    const arr = []
    deviceList.value.forEach(d => {
      if(d.type === 'rect'){
        d.points.forEach(item => {
          arr.push(item)
        })
      }
    })
    return arr
  })
  const handleItemDragStart = e => {
    e.dataTransfer.setData("type", e.target.dataset.type);
    e.dataTransfer.setData("dragType", 'copy');
    // console.log(e);
  }

  const handleItemDragend = (e) => {
    // console.log(e);
    e.dataTransfer.clearData();
  };
//设备枚举对象
  const deviceMsgEnum = {
    box:{
      w:126,//配电柜宽度，html中配置值于此相等
      h:50,//配电柜高度
      headerPoint:8,//配电柜顶部锚点数量
      footerPoint:8,//配电柜尾部锚点数量
      headerStep:14,//锚点位置间距 w/headerPoint+1
      footerStep:14//锚点位置间距 w/footerPoint+1
    },
    cabinet:{
      w:350,//配电柜宽度，html中配置值于此相等
      h:50,//配电柜高度
      headerPoint:8,//配电柜顶部锚点数量
      footerPoint:24,//配电柜尾部锚点数量
      headerStep:38,//锚点位置间距 w/headerPoint+1
      footerStep:14//锚点位置间距 w/footerPoint+1
    }
  }
  //计算长方形锚点位置
  const calculatePoints = (type,x,y,id) => {
    const headerLength = deviceMsgEnum[type].headerPoint
    const footerLength = deviceMsgEnum[type].footerPoint
    const headerStep = deviceMsgEnum[type].headerStep
    const footerStep = deviceMsgEnum[type].footerStep
    const pointLocationList = []
    for(let i=1; i<=headerLength; i++){
      pointLocationList.push({ x:x + headerStep*i, y:y, parentId: id, type: 'IN', index: i - 1 })
    }
    for(let i=1; i<=footerLength; i++){
      //记录锚点真实下标，用于连线时确认相对元素位置
      pointLocationList.push({
        x:x + footerStep*i,
        y:y + deviceMsgEnum[type].h,
        parentId: id,
        type: 'OUT',
        index: deviceMsgEnum[type].headerPoint + i - 1,
        headerPoint: deviceMsgEnum[type].headerPoint,//元素顶部锚点数量
        footerPoint: deviceMsgEnum[type].footerPoint,//元素底部锚点数量
      })
    }
    return pointLocationList
  }
  //计算长方形所处区域范围
  const calculateRanges = (type,x,y) => {
    const x1 = x
    const y1 = y
    const x2 = x + deviceMsgEnum[type].w
    const y2 = y + deviceMsgEnum[type].h
    return {x1,x2,y1,y2}
  }
//生成唯一id标识

//生成不重复的hash字符串
  const createNewId = () => {
    const id = HashCode(15)
    let idHasExist = deviceList.value.some((d) => d.id === id);
    if (idHasExist) {
      createNewId();
    } else {
      return id;
    }
  };
  const drop = (e,canvasInfo) => {
    // console.log('放置', e);
    //type区分普通柜子和建筑
    // console.log(e.dataTransfer.getData("type"));
    return new Promise(resolve => {
      const type = e.dataTransfer.getData("type")
      const item = {
        id:createNewId(),
        baseType:type,//基础属性，用于移动元素使用,暂未使用
        type:'rect',//长方形
        active:false,
        x: Number(parseFloat(String((e.offsetX - deviceMsgEnum[type].w / 2 - canvasInfo.canvasOffsetX) / canvasInfo.scaleCount)).toFixed(2)),
        y: Number(parseFloat(String((e.offsetY - deviceMsgEnum[type].h / 2 - canvasInfo.canvasOffsetY) / canvasInfo.scaleCount)).toFixed(2)),
        w: deviceMsgEnum[type].w,
        h: deviceMsgEnum[type].h,
        points:[],//锚点集合
        ranges:{},//位置范围,
        extData:{//用户自定义属性，支持JavaScript API任意数据类型
          title:'右键编辑属性'
        },
      }
      //添加锚点父节点id，用于绘制连线时同一个父节点不允许连接
      item.points = calculatePoints(item.baseType,item.x,item.y,item.id)
      item.ranges = calculateRanges(item.baseType,item.x,item.y)
      // console.log(item);
      deviceList.value.push(item)
      resolve()
    })
  };
  const dragover = () => {
    //我存在的意义是让元素能放置在id=box中，无任何执行操作
  };
  return {
    handleItemDragStart,
    handleItemDragend,
    createNewId,
    calculatePoints,
    calculateRanges,
    drop,
    dragover,
    deviceList,
    pointList
  }
}

export default canvasProcessFun